<template>
  <node-common title="结束" iconName="end-node" :isSelected="isSelected" :isHovered="isHovered" :model="model" :menus="menus" @handleMenu="handleMenu">
    <div class="content">
      <div class="node-key-value">
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>输出变量</span></div>
          <div class="node-key-value-item-value">
           
              <span v-if="getOutputParams.length > 0">{{ getOutputParams }}</span>
            <span v-else style="color: red">尚未配置</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>输出格式</span></div>
          <div class="node-key-value-item-value">
            <span>{{props.properties?.options?.outputText===true?"文本":"JSON"  }}</span>
          </div>
        </div>
        <div class="node-key-value-item" v-if="props.properties?.options?.outputText">
          <div class="node-key-value-item-key" style="width: 58px"><span>文本内容</span></div>
          <div class="node-key-value-item-value">
            <span v-if="props.properties?.options?.outputContent.length > 0">{{ props.properties?.options?.outputContent }}</span>
             <span v-else style="color: red">尚未配置</span>
          </div>
        </div>
      </div>
       <div class="ellipsis" style="font-size: 12px;color:#666;">{{ getRemarks }}</div>
    </div>
  </node-common>
</template>

<script setup>
import { ref, onMounted, reactive, watch,computed ,inject} from 'vue';
import NodeCommon from '../base-node.vue';

const props = defineProps({
  model: {
    type: Object,
    default: () => ({})
  },
  graphModel:{
    type:Object,
     default: () => ({})
  },
  properties: {
    type: Object,
    default: null
  },
  isHovered: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

const getOutputParams = computed(() => {
  return props.properties?.outputParams?.map(item => item.name).join(',');
});
const getRemarks = computed(() => {
  return props.properties?.remarks;
});
const menus = ref([{ name: '删除', key: 'delete', color: '#fb363f' }]);
const handleMenu = item => {
  if (item.key === 'delete') {
    props.graphModel.deleteNode(props.model.id)
  }
};
</script>
<style  lang='less' scoped>
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.node-key-value {
  display: flex;
  flex-direction: column;
}
.node-key-value-item {
  display: flex;
  flex-direction: row;
}
.node-key-value-item-key {
  color: #999;
  text-align: right;
  margin-right: 8px;
}
.node-key-value-item-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-iconify {
  display: inline-block;
}
.anticon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.j-airag-vue-node-anchor {
  position: relative;
  z-index: 0;
  width: 100%;
  color: #1890ff;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.j-airag-vue-node-anchor svg {
  display: none;
}

.j-airag-vue-node-anchor svg:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

.airag-node-label {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  font-family: æ€æºé»‘ä½“, serif !important;
}

.node-next {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 40px;

  span {
    display: flex;
    align-items: center;
  }
  .next-icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: #fff;
  }
}
</style>